{% extends "announcements/announcements.html" %}

{% block page_link %}

{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        .add_background {
            background: #A9A9A9;
        }

        tr {
            height: 35px;
        }

        th {
            text-align: center;
        }

        table {
            table-layout: fixed;
        }

        td:first-child, th:first-child {
            position: sticky;
            left: 0; /* 首行永远固定在左侧 */
            z-index: 1;
        }

        thead tr th {
            position: sticky;
            top: 0; /* 列首永远固定在头部  */
            background-color: #E8E8E8;
        }

        th:first-child {
            z-index: 2;
        }

        .li-class {
            list-style: none;
            margin-top: 2%;
            color: #0b0b0b;
            cursor: pointer;
        }

        .top_tag {
            border-bottom: #01AAED solid 2px;
            color: #01AAED;
        }

        .tab_top {
            width: 300px;
            height: 40px;
            line-height: 40px;
            text-align: left;
            display: inline-block;
            cursor: pointer;
            padding-left: 1%;
        }

        .span_item {
            color: #ffffff;
            background-color: #2db7f5;
            border-radius: 4px;
            padding: 3px 6px;
            cursor: pointer;
        }

        .span_active {
            padding: 5px 6px;
            cursor: pointer;
            color: black;
        }

    </style>
{% endblock %}


{% block right_content %}
    <div style="text-align: center;height: 100%;">
        <div style="margin-top: 15%;">
            <img src="../../static/technological/img/23lock.png" alt="" style="width: 150px;height: 150px;">
            <div style="margin-top: 10px;">该功能未上线</div>
        </div>
    </div>
{#    <div style="width: 100%;height: 40px;background: white;border-bottom: #A9A9A9 solid 0.5px;">#}
{#        <div id="dispatch_detail_tab" class="tab_top">#}
{#            部门申请统计分析#}
{#        </div>#}
{#    </div>#}
{##}
{#    <div style="width: 100%;height: 90%;padding: 1%;">#}
{#        <div style="width: 100%;border: #d7dbda solid 1px;height: 40px;">#}
{#            <div style="width: 20%;height: 100%;background: #dfdfdf;display: inline-block;line-height: 40px;padding-left: 3%;color: black;">#}
{#                公告申请时间：#}
{#            </div>#}
{#            <div style="width: 77%;height: 40px;display: inline-block;">#}
{#                <span id="1" onclick="change_color('1')" class="span_item">不限</span>#}
{#                <span id="2" onclick="change_color('2')" class="span_active">指定日期范围</span>#}
{#            </div>#}
{#        </div>#}
{#        <div class="container">#}
{#            <div class='col-md-4'>#}
{#                <div class="form-group">#}
{#                    <div class='input-group date'>#}
{#                        <input type='text' class="form-control" id='datetimepicker12'/>#}
{#                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>#}
{#                </span>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#            <div class='col-md-4'>#}
{#                <div class="form-group">#}
{#                    <div class='input-group date'>#}
{#                        <input type='text' class="form-control" id='datetimepicker13'/>#}
{#                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>#}
{#                </span>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}
{% endblock %}


{% block script %}
    <script>
        window.onload = function () {
            document.getElementById("Announcement-statistics").className = "add_class";
            document.getElementById("inform").className = "add-nav-active";
        };

        function change_color(ele) {
            if (ele === '1') {
                document.getElementById("1").className = 'span_item';
                document.getElementById("2").className = 'span_active';
            } else {
                document.getElementById("1").className = 'span_active';
                document.getElementById("2").className = 'span_item';
            }
        }

        $(function () {
            $('#datetimepicker12').datetimepicker({locale: 'zh-cn', viewMode: 'days', format: 'YYYY/MM/DD'});
            $('#datetimepicker13').datetimepicker({locale: 'zh-cn', viewMode: 'days', format: 'YYYY/MM/DD'});
            $("#datetimepicker12").on("dp.change", function (e) {
                $('#datetimepicker13').data("DateTimePicker").minDate(e.date);
            });
            $("#datetimepicker13").on("dp.change", function (e) {
                $('#datetimepicker12').data("DateTimePicker").maxDate(e.date);
            });
        });
    </script>
{% endblock %}
